Pixels of the Week – August 30, 2020

This content is 4 years old. Remember that the following content might be outdated.

Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, HTML, CSS, the web industry, process inspiration and more…

This week’s selection: an interesting short ebook on interfaces, why design thinking is failing, design system assets, perfect banana bread sandwich with machine learning, some CSS inspiration, CSS grid doesn’t replace a grid framework, free Sketch illustration plugin, PWAs and privacy, grid vs tables and accessibility, random wikipedia pictures, cool 3D illustrations in CSS, a LEGO prosthetic arm, etc.

#Now – what I’m up to

I’m still working on my little CSS transition and animations explained in one demo. It’s almost finished!! I added the posters explanation design, some hsl() and vars on the colors and on some borders for easy calc(), some reduced motion that removes comets and slows down drastically the CSS animation. I still need to work the responsive and we are good!

TL;DNR the one you should not miss

#Design

Why Do We Interface?” an interesting online micro-book that explores the why, the how, the past, present and future of interfaces

Interesting article

#Design Thinking

Why Design Thinking is failing and what we should be doing differently: “Design Thinking is a methodology that sells innovation & mind-blowing discoveries but the truth is that we are training designers and non-designers to be happy with half-ass work that uses a lot of time and money” I want to quote it all so please read it

#UXDesign #Casestudy

Interesting case study on the redesign of Sephora’s mobile app

#CSS

  • The Just in Case Mindset in CSS“, I like this mindset, making sure that the components will still work if you have more content, less content, a scroll bar, no image, etc.
  • Why CSS Grid Layout doesn’t replace the framework‘s grid” interesting take on why you will eventually once the project grows in complexity still go back to abstractions and building a grid system (even it’s not Bootstrap ^^)

#Accessibility #Grid #Table

Grids Part 1: To grid or not to grid” by Sarah Higley, an interesting read on using grid (instead of a table) to display tabular data if the primary purpose is to enable user interaction on this data

#PWA #Privacy

An interesting read on PWAs and privacy raising the concern that the start_url in Progressive Web Apps could be used for fingerprinting and tracking users.

Inspiration, fun experiments and great ideas

#MachineLearning #Sandwich

Finally, tech answering real questions: how do you optimize the banana size and layout of the peanut butter banana sandwich with machine learning and computer vision?

#Photos

Olympus and His New Gods” by Ana Martinez, some amazing pictures of gods revisited.

#CSS #Retro #Inspiration

Hooo, I almost forgot how beautiful this CSSZenGarden theme was , timeless, perfect typography, I love those retro almost old school paper like designs

#CSS

Creating 3D Illustrations with CSS” this is really cool 😀

#CSS #SVG #Animation

Here is a smooth and relaxing summer animation by Jack Watson

#LEGO #innovation #design

Building a Prosthetic Arm With Lego

#Random #Fun

If you like some randomness in your life, here is a page that randomly displays a wikipedia image (you can click on it to get more info then)

Useful tools and resources that will make your life easy

#DesignSystems

Assets and resources from SuperFriendly to help you learn and teach design systems.

#Illustrations #Sketch

Remember Blush? They have some super nice and diverse illustrations available as Figma plugin. Good news: they now have a Sketch Plugin as well!!